<template>
	<!-- 生产报工 -->
	<view class="report-content">

		<view class="report">
			<view class="report-pic">

				<!-- 左边一列 -->
				<view class="report-left">

					<!-- 模块1 -->
					<view class="report-card report-left-card1">
						<component v-bind:is="currentComponent1" :currentProps="currentProps"></component>
					</view>
					<!-- 模块2 -->
					<view class="report-card report-left-card2">
						<component v-bind:is="currentComponent2" :currentProps="currentProps"></component>
					</view>
					<!-- 模块3 -->
					<view class="report-card report-left-card3">
						<component v-bind:is="currentComponent3" :currentProps="currentProps">
						</component>
					</view>

				</view>

				<!-- 中间一列 -->
				<view class="report-center" style="margin: 10px 0;">

					<!-- 模块4 -->
					<view class="report-card report-center-card1">
						<component v-bind:is="currentComponent4" :currentProps="currentProps">
						</component>
					</view>

					<!-- 模块5 -->
					<view class="report-card report-center-card2">
						<component v-bind:is="currentComponent5" :currentProps="currentProps">
						</component>
					</view>
					
				</view>

				<!-- 右边一列 -->
				<view class="report-right">

					<!-- 模块6 -->
					<view class="report-card report-right-card1">
						<component v-bind:is="currentComponent6" :currentProps="currentProps"></component>
					</view>

					<!-- 模块7 -->
					<view class="report-card report-right-card2">
						<component v-bind:is="currentComponent7" :currentProps="currentProps"></component>
					</view>

					<!-- 模块8 -->
					<view class="report-card report-right-card3">
						<component v-bind:is="currentComponent8" :currentProps="currentProps"></component>
					</view>

				</view>
			</view>
		</view>


		<u-toast ref="uToast" />

		<!-- 滚动通知 -->
		<!-- <u-notice-bar class="notice" mode="horizontal" color="#fff" bg-color="red" font-size="35" padding="10rpx 10rpx"
			:list="noticeBarList" :close-icon="true" @close="noticeclose"></u-notice-bar> -->
	</view>


</template>
<script>
	import NFCTest from './NFCTest.js'

	export default {
		components: {

		},
		props: {
			workstationId: {
				type: String,
				default: ''
			},

			worklineObj: {
				type: Object,
				default: null
			},

		},
		data() {
			return {
				noticeBarList: [
					"测试：消息通知"
				],
				containerWidth: 0,
				scrollWidth: 0,

				// 关键件表格
				datalist: [],
				loading: false,
				type: "",

				machineryImg: '',
				releaseOrderImg: '',
				// 报工停产
				showstopReport: false,
				workorder: {
					quantity: "",
					routeRev: "",
					worklineName: "",
				},
				data_slow: true,
				modalshow: false,
				content: "",

				uLoading: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				total: 0,

				// 动态组件 每个模块要展示的组件名称
				currentComponent1: '',
				currentComponent2: "",
				currentComponent3: "",
				currentComponent4: '',
				currentComponent5: "",
				currentComponent6: "",
				currentComponent7: "",
				currentComponent8: "",

				// 动态props 每个模块需要传递的值
				currentProps: {},

				// 页面需要的组件名称和位置（后续需要调用接口）
				componentsList: [{
					componentName: 'proTaskInfo',
					stations: 1
				}, {
					componentName: 'ScanIssueWorkOrderCode',
					stations: 7
				}, {
					componentName: 'btnTools',
					stations: 3
				}, {
					componentName: 'ImgList',
					stations: 5
				}, {
					componentName: 'ProductionWorkOrders',
					stations: 4
				}, {
					componentName: 'ElectricityData',
					stations: 6
				}, {
					componentName: 'StepRecords',
					stations: 2
				}, {
					componentName: 'PLCData',
					stations: 8
				}, ],

				bomId: ''
			};
		},



		created() {
	
			this.bomId = this.$store.state.vuex_BomId;
			uni.$on('updateQueueList', res => {
				console.log('触发updateQueueList', res)
				this.updateQueueList()
			})

			this.getQueueList();

			//这里用异步获取读取到的NFC数据
			// 初始化NFC事件监听
			this.initNFCEvents();
			// 启动NFC监听
			this.startNFCListening();
		},
		onShow() {


			// 页面显示时重新启动NFC监听
			this.startNFCListening();

		},

		onHide() {
			// 页面隐藏时停止NFC监听
			this.stopNFCListening();
		},
		onUnload() {
			// 页面卸载时停止NFC监听和移除事件监听
			this.stopNFCListening();
			this.removeNFCEvents();
			uni.$off('updateQueueList')

		},
		beforeDestroy() {},
		methods: {

			// nfc
			// 初始化NFC事件监听
			initNFCEvents() {
				// NFC ID读取事件
				uni.$on('nfcIdRead', this.handleNFCRead);

				// NFC错误事件
				uni.$on('nfcError', this.handleNFCError);

				// NFC状态事件
				uni.$on('nfcStatus', this.handleNFCStatus);

				// NFC防抖事件
				uni.$on('nfcDebounce', this.handleNFCDebounce);
			},

			// 移除NFC事件监听
			removeNFCEvents() {
				uni.$off('nfcIdRead', this.handleNFCRead);
				uni.$off('nfcError', this.handleNFCError);
				uni.$off('nfcStatus', this.handleNFCStatus);
				uni.$off('nfcDebounce', this.handleNFCDebounce);
			},

			// 启动NFC监听
			// 启动NFC监听
			startNFCListening() {
				// 检查Android类是否已导入
				if (!NFCTest.reinitAndroidClasses()) {
					uni.showToast({
						title: 'NFC功能初始化失败',
						icon: 'none'
					});
					return;
				}

				const status = NFCTest.checkNFCStatus();

				if (!status.supported) {
					uni.showToast({
						title: '设备不支持NFC',
						icon: 'none'
					});
					return;
				}

				if (!status.enabled) {
					uni.showToast({
						title: '请先启用NFC功能',
						icon: 'none'
					});
					return;
				}

				if (!status.listening) {
					const success = NFCTest.initNFCListener();
					if (!success) {
						uni.showToast({
							title: '启动NFC监听失败',
							icon: 'none'
						});
					}
				}
			},

			// 停止NFC监听
			stopNFCListening() {
				NFCTest.stopNFCListening();
			},

			// 处理NFC读取事件
			handleNFCRead(nfcId) {
				console.log('NFC读取成功:', nfcId);
				this.nfcId = nfcId;

				uni.showToast({
					title: `读取成功: ${nfcId}`,
					icon: 'none',
					duration: 2000
				});

				// 这里可以添加处理NFC ID的业务逻辑
				// 例如调用API验证NFC ID等
				this.processNFCId(nfcId);
			},

			// 处理NFC错误事件
			handleNFCError(message) {
				console.error('NFC错误:', message);
				this.nfcMessage = message;

				uni.showToast({
					title: message,
					icon: 'none'
				});
			},

			// 处理NFC状态事件
			handleNFCStatus(status) {
				console.log('NFC状态:', status);
				this.nfcStatus = status.status;
				this.nfcMessage = status.message;
			},

			// 处理NFC防抖事件
			handleNFCDebounce(data) {
				console.log('NFC防抖:', data);

				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			},

			// 处理NFC ID的业务逻辑
			processNFCId(nfcId) {
				// 这里添加你的业务逻辑
				// 例如调用API验证NFC ID
				console.log('处理NFC ID:', nfcId);
				this.form.workerCode = nfcId;
				this.processshow = true;
			},
			// 手动重新启动NFC监听
			restartNFC() {
				this.stopNFCListening();
				setTimeout(() => {
					this.startNFCListening();
				}, 500);
			},
			// nfc

			// 动态组件
			//  componentName 组件名称	stations 所属位置
			async setComponent(componentName, stations) {
				this.currentProps = null;
				try {
					let component, props;

					switch (componentName) {
						// 生产任务信息
						case 'proTaskInfo':
							const proTaskInfo = await import('./components/proTaskInfo.vue');
							component = proTaskInfo.default || proTaskInfo;
							this.currentProps = this.workorder;
							break;

							// 发布工单编码二维码
						case 'ScanIssueWorkOrderCode':
							const ScanIssueWorkOrderCode = await import('./components/ScanIssueWorkOrderCode.vue');
							component = ScanIssueWorkOrderCode.default || ScanIssueWorkOrderCode;
							this.currentProps = this.workorder;
							break;


							// 应用工具
						case 'btnTools':
							const btnTools = await import('./components/btnTools.vue');
							component = btnTools.default || btnTools;
							this.currentProps = this.worklineObj;
							break;


							// PLC数据
						case 'PLCData':
							const PLCData = await import('./components/PLCData.vue');
							component = PLCData.default || PLCData;
							break;


							// 电量数据
						case 'ElectricityData':
							const ElectricityData = await import('./components/ElectricityData.vue');
							component = ElectricityData.default || ElectricityData;
							break;

							// 刷卡登录用户（成型工位）
						case 'ScanCardList':
							const ScanCardList = await import('./components/ScanCardList.vue');
							component = ScanCardList.default || ScanCardList;
							break;

							// 作业指导书
						case 'ImgList':
							const ImgList = await import('./components/ImgList.vue');
							component = ImgList.default || ImgList;
							this.currentProps = this.bomId;
							break;

							// 发布工单信息
						case 'ProductionWorkOrders':
							const ProductionWorkOrders = await import('./components/ProductionWorkOrders.vue');
							component = ProductionWorkOrders.default || ProductionWorkOrders;
							this.currentProps = this.worklineObj;
							break;

							// 工步信息
						case 'StepRecords':
							const StepRecords = await import('./components/StepRecords.vue');
							component = StepRecords.default || StepRecords;
							break;


						default:
							return;
					}

					// 把组件填充到对应的位置
					switch (stations) {
						case 1:
							this.currentComponent1 = componentName;
							break;

						case 2:
							this.currentComponent2 = componentName;
							break;

						case 3:
							this.currentComponent3 = componentName;
							break;

						case 4:
							this.currentComponent4 = componentName;
							break;

						case 5:
							this.currentComponent5 = componentName;
							break;

						case 6:
							this.currentComponent6 = componentName;
							break;

						case 7:
							this.currentComponent7 = componentName;
							break;

						case 8:
							this.currentComponent8 = componentName;
							break;

						default:
							return;
					}

					// 注册组件（动态设置 component 名）
					this.$options.components[componentName] = component;

				} catch (error) {
					console.error('加载组件失败:', error);
				}
			},
			// 根据列表渲染组件
			renderComponents() {
				this.componentsList.forEach(item => {
					setTimeout(() => {
						this.setComponent(item.componentName, item.stations)
					}, 500)
				})
			},

			// 判断当前的工序
			isProcess(process) {
				return this.worklineObj && this.worklineObj.processName === process;
			},

			// 关闭滚动
			noticeclose() {
				this.noticeBarList = []
			},
			// 判断{}
			isEmptyObject(obj) {
				return Object.keys(obj).length === 0;
			},

			// 组件执行操作之后，需要更新工单，并且切换tabs
			updateQueueList() {
				this.getQueueList()
				setTimeout(() => {
					this.$emit('tabsChange', 'stopproduct')
				}, 1000)
			},

			// 获取发布工单
			getQueueList() {

				if (this.isProcess('养护')) {
					// 查询已成型报工但未养护组盘的工单列表

					this.$u.api.noCuringGroup(this.queryParams).then(res => {
						if (res.rows.length > 0) {
							this.workorder = res.rows[0]
							this.workstatList = res.rows;
							this.total = res.total
						}
						this.renderComponents()
					});
				} else if (this.isProcess('脱模精整')) {
					// 查询养护已组盘但未拆盘的工单列表

					this.$u.api.groupNoUngroup(this.queryParams).then(res => {
						if (res.rows.length > 0) {
							this.workorder = res.rows[0].proReportingList[0]
							this.workstatList = res.rows.map(item => {
								return {
									...item,
									selected: false
								}
							})
							this.total = res.total

						}
						this.renderComponents()
					});
				} else if (this.isProcess('热处理')) {
					// 查询精整已完成但未热处理组盘的工单列表

					this.$u.api.noHeatGroup(this.queryParams).then(res => {
						if (res.rows.length > 0) {
							this.workorder = res.rows[0]
							this.workstatList = res.rows;
							this.total = res.total
						}
						this.renderComponents()

					});
				} else if (this.isProcess('包装')) {
					// 查询热处理已组盘但未拆盘的工单列表
					this.$u.api.groupedNotUngrouped(this.queryParams).then(res => {
						if (res.rows.length > 0) {
							this.workorder = res.rows[0].proReportingList[0]
							this.workstatList = res.rows.map(item => {
								return {
									...item,
									selected: false
								}
							});
							this.total = res.total
						}
						this.renderComponents()

					});
				} else {
					// 其他的工序展示发布工单
					// 查询发布工单
					let arr = {
						status: '6',
						...this.queryParams
					}
					this.$u.api.listreleaseOrder(arr).then(res => {
						if (res.rows.length > 0) {
							this.workorder = res.rows[0]
							this.workstatList = res.rows;
							this.total = res.total
						}
						this.renderComponents()

					});
				}

			},
		},
	};
</script>
<style lang="scss" scoped>
	.report-content {
		height: 99%;
		overflow: hidden;
		position: relative;
	}

	.report-content ::v-deep .report-card {
		border-radius: 6px;
		border: 1px solid #e4e7ed;
		overflow: hidden;
		background-color: #fff;
		color: #303133;
		@apply p-x-20px p-t-10px p-b-0px dark: bg-#1d1e1f dark:c-#cfd3dc dark:b-#414243 flex flex-col flex-1 transition-ease-in-out transition-300;
	}


	::v-deep .card-title {
		line-height: 30px;
		position: relative;
		padding-left: 20px;
		font-size: 14px;
		font-weight: 600;
		font-style: italic;
		color: #ffaa00;
		border-bottom: 1px solid #e4e7ed;
	}


	.report {
		width: 99%;
		height: 100%;
		padding: 20rpx;

		.report-pic {
			height: 98%;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

		}


		.report-center {
			position: relative;
			display: flex;
			height: 100%;
			width: 70%;
			flex-direction: column;
			justify-content: space-between;

			.report-center-card1 {
				margin-top: 10rpx;
				height: 50%;
			}

			.report-center-card2 {
				margin-top: 10rpx;
				height: 50%;
			}
		}


		.report-left {
			height: 100%;
			width: 15%;
			// flex: 0 0 20%;
			min-width: 1px;
			// position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-right: 20rpx;

			.report-left-card1 {
				margin-top: 10rpx;
				height: 30%;
			}

			.report-left-card2 {
				margin-top: 10rpx;
				height: 40%;
			}

			.report-left-card3 {
				margin-top: 10rpx;
				height: 30%;
			}


		}

		.report-right {
			width: 15%;
			// flex: 0 0 12%;
			height: 100%;

			min-width: 1px;
			margin-left: 20rpx;
			// position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			// align-items: center;

			.report-right-card1 {
				// margin-top: 10px;
				height: 30%;
			}

			.report-right-card2 {
				margin-top: 10rpx;
				height: 40%;
			}

			.report-right-card3 {
				margin-top: 10rpx;
				height: 30%;
			}
		}
	}


	@keyframes rotate {
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes glow {
		to {
			background-position: 300%;
		}
	}

	::v-deep {

		.uni-table,
		.uni-table-th {
			position: sticky;
		}
	}

	::v-deep {

		.uni-table,
		.uni-table-th,
		.uni-table-tr {
			background-color: transparent !important;
			// color: #f5f6f7;
		}
	}

	::v-deep {

		.uni-table,
		.uni-table-th,
		.uni-table-tr,
		.uni-table-td {
			text-align: center !important;
			// color: #f5f6f7;
		}
	}



	// 消除滚动条
	::-webkit-scrollbar {
		width: 0px;
	}
</style>